<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>宿舍楼：</span>
                <span>{{curDorm.name}}</span>
            </div>
          
            <div>
                <el-form :inline="true"  class="demo-form-inline"> 
                    <el-form-item>
                        <el-button @click="addRoom" type="primary" icon="el-icon-plus">添加房间</el-button>
                    </el-form-item>
                    <!-- <el-form-item>
                        <el-button  type="primary" icon="el-icon-upload">批量导入住宿学生信息</el-button>
                        <input ref="importInput" @change="importInputChange" type="file" class="import-input" accept=".xls, .xlsx" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="text" >批量导入模版下载</el-button>
                    </el-form-item> -->
                </el-form>
            </div>
            <el-table
            border
             :stripe='true'
                :data="roomList"
               
               >
                <el-table-column
                prop="name"
                label="宿舍名称"
                
                align="center" >
                </el-table-column>
                <el-table-column
                prop="floor"
                label="楼层"
              
                 align="center">
                </el-table-column>
                <el-table-column
                prop="bedCount"
                label="床位" 
                 align="center">
                </el-table-column>
                 <el-table-column
                prop="usedCount"
                label="已分配人数" 
                 align="center">
                </el-table-column>
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button @click="editRoom(scope.row)" type="text">编辑</el-button>
                        <el-button  @click="deleteRoom(scope.row)" type="text" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
             <div class="page-p">
                <el-pagination
                    :current-page="PageNum"
                    background
                    :page-size="PageSize"
                    layout="total,prev,pager,next,jumper"
                    :total="total"
                     @current-change="handleCurrentChange"
                  >
                </el-pagination>
            </div>
        </el-card>

        <add-room></add-room>
        <edit-room></edit-room>
    </div>
</template>
<script>
import addRoom from './addRoom'
import editRoom from './editRoom'
export default {
    name: 'roomList',
    components: {
        addRoom, editRoom
    },
    computed: {
        curDorm () {
            return this.$store.state.dorm.curDorm    
        },
        PageNum () {
            return this.$store.state.room.PageNum
        },
        PageSize () {
            return this.$store.state.room.PageSize
        },
        total () {
            return this.$store.state.room.total
        },
        roomList () {
            return this.$store.state.room.roomList
        }
    },
    data () {
        return {
          
        }
    },
    methods: {
        sortChange (d) {
            console.log(d)
            this.$store.state.room.sort = d.order
            this.getList(1)
        },
       addRoom () {
            this.$store.state.dorm.addRoomVisible = true
        },
        editRoom (item) {
            this.$store.state.room.editRoom = item
            this.$store.commit('room/showEditRoom')
        },
       deleteRoom (item) {
            this.$confirm('确定删除“' + item.name + '”?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('room/deleteRoom', item.id).then(res => {
                    this.$message.success('删除成功')
                })
            })
        },
        handleCurrentChange (num) {
            this.getList(num)
        },
        getList (pageNum) {
             this.$store.dispatch('room/getRoom', {
                PageNum: pageNum
            })
        }
    },
    mounted () {
        this.getList(1)
    }
}
</script>
<style scoped>
.page-p{
    padding: 20px;
    text-align: right;
}
</style>
